<div id="notice_manage">
    <div class="notice_manage">
        <el-row class="table_search">
            <el-col :span="24">
                <template>
                    <el-select v-model="parameters.status" placeholder="全部状态">
                        <el-option
                                v-for="item in lists"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>

                    <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
            </el-col>
        </el-row>

        <el-row class="table_btn noticeBox">
            <el-col :span="24" class="text-r">
                <el-button type="primary" icon="el-icon-plus" @click="addNotice" class="addUsrtBtn">新增通知</el-button>
            </el-col>
        </el-row>

        <template>
            <el-table
                    size="mini"
                    :data="tableData"
                    style="width: 100%;cursor: pointer;"
                    @row-click='handleRowHandle'
                    class="noticeTable">
                <el-table-column
                        align="center"
                        prop="notifySeq"
                        label="通知编号"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="notifyType"
                        label="通知类型"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="200"
                        prop="status"
                        label="通知状态">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="200"
                        prop="createDate"
                        :formatter="formatterTime"
                        label="创建时间">
                </el-table-column>

                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                v-if="scope.row.status == '正常'?true:false"
                                size="mini"
                                @click="retract(scope.$index, scope.row,$event)"
                                class="btn-Del">
                            撤回
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="block footerBox">
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :current-page.sync="currentPage"
                        :total="totalCount">
                </el-pagination>
            </div>
        </template>
    </div>
    <!--新增通知弹窗-->
    <div class="isShowingBox" v-show="isShowingBox"></div>{{isOverflow}}
    <el-dialog :close-on-click-modal="modalAble" :close-on-press-escape="escAble" title="新增通知" :visible.sync="dialogFormVisible" :show-close="showDelBtn" :before-close="emptyContent">
        <span class="delDialogBtn" @click="closeAddDialog">x</span>
        <el-form
                class="add-template-form"
                :rules="rules"
                ref="form"
                :model="form"
                label-width="140px"
                :label-position="labelPosition">

            <el-form-item label="选择机构：" prop="name" :label-width="formLabelWidth">
                <el-input style="width: 60%;"  readonly onclick="showMenu();" id="citySel" v-model="form.name" placeholder="请选择机构" readonly></el-input>
                <div id="menuContent" class="menuContent" style="display:none; position: absolute;z-index: 1000;overflow: auto;width:60%;">
                    <ul id="treeDemo123" class="ztree" style="margin-top:0;"></ul>
                </div>
            </el-form-item>
            <el-form-item label="通知：" prop="desc" :label-width="formLabelWidth">
                <el-input  style="width: 60%;" type="textarea" v-model="form.desc"></el-input>
            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="caleForm('form')">取 消</el-button>
            <el-button type="primary" @click="goConfirm('form')">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog :close-on-click-modal="modalAble" :close-on-press-escape="escAble" title="通知详情" :visible.sync="dialogInfoVisible" :show-close="showDelBtn" class="dialogDetails">
        <span class="delDialogBtn" @click="closeAddDialog">x</span>
        <div class="info-template-content">
            <el-row class="item-row">
                <el-col :span="5" style="color: #666">状态：</el-col>
                <el-col v-if="noticeInfo.status == '正常'" :span="19" style="color: #409EFF;">{{noticeInfo.status}}</el-col>
                <el-col v-else :span="19" style="color: #ff4444;">{{noticeInfo.status}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="5" style="color: #666">类型：</el-col>
                <el-col :span="19"style="color: #333">{{noticeInfo.notifyType}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="5" style="color: #666;">通知内容：</el-col>
                <el-col
                        :span="19"
                        style="color: #333;">
                    {{noticeInfo.notifyContext}}
                </el-col>
            </el-row>
        </div>
    </el-dialog>
</div>
<script>
    var layer,
        loadRole;
    layui.use('layer', function(){
        layer = layui.layer;
        loadRole  = layer.load(1, {shade: [0.5, '#000']});

    });


    var setting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeClick: beforeClick,
            onCheck: onCheck
        }
    };
    var zNodes = [];
    function beforeClick(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo123");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }

    function onCheck(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo123"),
            nodes = zTree.getCheckedNodes(true),
            checkArr = '',
            v = "";


        for (var i=0, l=nodes.length; i<l; i++) {
            v += nodes[i].name + ",";
            if(!nodes[i].isParent){
                checkArr +=  nodes[i].id +  ',';
                //checkArr.push(nodes[i].id);
            }
        }


        if (v.length > 0 ) v = v.substring(0, v.length-1);
        if (checkArr.length > 0 ) checkArr = checkArr.substring(0, checkArr.length-1);

        notice_manage.form.name = v;
        notice_manage.form.selectId = checkArr;

    }

    function showMenu() {
        var cityObj = $("#citySel");
        var cityOffset = $("#citySel").offset();
        console.log(cityObj)
        $("#menuContent").slideDown("fast");

        $.post("${basePath}merchant/dept/togetDeptTree", function (json) {
            notice_manage.treeArr = '';
            notice_manage.treeArr = json.t;
            var treeObj = $.fn.zTree.init($("#treeDemo123"), setting, json.t);
            //默认展开所有节点
            //treeObj.expandAll(true);
        });
        //$.fn.zTree.init($("#treeDemo123"), setting, zNodes);
        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
            hideMenu();
        }
    }

    var notice_manage =
        new Vue({
            el: "#notice_manage",

            data: {
                isShowingBox:false,
                showDelBtn:false,
                escAble:false,
                modalAble:false,
                treeArr: '',
                labelPosition: 'left',
                dialogFormVisible: false,
                dialogInfoVisible: false,
                noticeInfo: {},
                form: {
                    desc: '',
                    name: '',
                    selectId: ''
                },
                rules: {
                    desc: [
                        { required: true, message: '请填写通知内容', trigger: 'blur' },
                        { max: 600, message: '长度在 600 个字符以内', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请选择末级机构', trigger: 'blur' }
                    ]
                },
                formLabelWidth: '120px',
                /*1-正常 0-撤回 2-草稿*/
                lists: [
                    {
                        value: '',
                        label: '全部状态'
                    }
                    ,
                    {
                        value: '1',
                        label: '正常'
                    },
                    {
                        value: '0',
                        label: '撤回'
                    },
                ],
                value: '',
                tableData: [],
                totalCount:'',
                totalPage:'',
                parameters:{
                    'status':'',
                    'currentPage':''
                },
                currentPage: 1,
            },
            methods: {
                backHome:function () {
                    this.closeAddDialog();
                    this.isShowingBox = false;
                },
                /**
                 * 点击X关闭模态框
                 * */
                closeAddDialog:function () {
                    this.isShowingBox = false;
                    if(notice_manage.dialogFormVisible){
                        notice_manage.dialogFormVisible = false;
                        notice_manage.$refs.form.resetFields();
                    }else if(notice_manage.dialogInfoVisible){
                        notice_manage.dialogInfoVisible = false;
                    }
                },
                // 关闭前清空内容before-close
                emptyContent:function(){
                    notice_manage.dialogFormVisible = false;
                    notice_manage.$refs.form.resetFields();
                },
                // 时间转换
                formatterTime: function (row) {
                    return new Date(row.createDate).Format('yyyy-MM-dd   hh:mm:ss');
                },
                //新增通知
                addNotice: function () {
                    this.isShowingBox = true;
                    notice_manage.dialogFormVisible = true;
                },
                //弹窗取消
                caleForm: function (formName) {
                    notice_manage.dialogFormVisible = false;
                    notice_manage.$refs[formName].resetFields();
                },
                // 新增提交功能
                goConfirm: function (formName) {
                    if(this.treeArr){
                        if(this.treeArr.length < 2){
                            layer.msg('请先添加机构', {icon: 2});
                            return
                        }
                    }
                    notice_manage.$refs[formName].validate(
                        function(valid) {
                            if (valid) {
                                notice_manage.dialogFormVisible = false;
                                var options= {
                                    notifyContext: notice_manage.form.desc,
                                    treeDemos: notice_manage.form.selectId
                                };
                                sendService('${basePath}merchant/notify/insertNotify', options, function (resData) {
                                    if(resData.status == 'success'){
                                        notice_manage.isShowingBox = false;
                                        layer.msg(resData.msg, {icon: 6});
                                        reloadPage('${basePath}/merchant/notify/getNotifyList');

                                    }else {
                                        notice_manage.isShowingBox = false;
                                        layer.msg(resData.msg, {icon: 2});
                                    }
                                })
                            } else {
                                return false;
                            }
                        });
                },
                // 分页加载数据
                handleCurrentChange: function(currentPage){
                    Pagesearch(this,'${basePath}merchant/notify/findMerchantNotifyList', this.parameters,currentPage,
                        function (resData) {
                            if(resData.status == 'success'){
                                resData.t.forEach(function (item) {
                                    /*1-正常 0-撤回 2-草稿*/
                                    if(item.status == '1'){
                                        item.status = '正常'
                                    } else if(item.status == '0'){
                                        item.status = '撤回'
                                    } else if(item.status == '2'){
                                        item.status = '草稿'
                                    }
                                    if(item.notifyType == '04'){
                                        item.notifyType = '系统通知'
                                    }
                                });
                            }
                        });
                },
                // 搜索
                searchFun:  function () {
                    Pagesearch(this,'${basePath}merchant/notify/findMerchantNotifyList', this.parameters,1,
                        function (resData) {
                            if(resData.status == 'success'){
                                /*1-正常 0-撤回 2-草稿*/
                                resData.t.forEach(function (item) {
                                    if(item.status == '1'){
                                        item.status = '正常'
                                    } else if(item.status == '0'){
                                        item.status = '撤回'
                                    } else if(item.status == '2'){
                                        item.status = '草稿'
                                    }
                                    if(item.notifyType == '04'){
                                        item.notifyType = '系统通知'
                                    }
                                });
                            }
                        });
                } ,
                // 撤回
                retract: function (index, row,e) {
                    stopMaoPao();
                    if(row.status == '正常'){
                        var message = confirm("'此操作将永久撤回该通知，是否继续'");
                        if(message){
                            var options= {notifySeq: row.notifySeq};
                            sendService('${basePath}/merchant/notify/withdrawNotify', options, function (resData) {
                                if(resData.status == 'success'){
                                    row.status = '撤回';
                                    layer.msg(resData.msg, {icon: 6});
                                }
                            })
                        }
                    }
                },
                // 详情
                handleRowHandle: function (row) {
                    this.isShowingBox = true;
                    notice_manage.dialogInfoVisible = true;
                    notice_manage.noticeInfo = row;
                }
            },
            created: function () {
                Pagesearch(this,'${basePath}merchant/notify/findMerchantNotifyList', null,1,
                    function (resData) {
                        if(resData.status == 'success'){
                            layer.close(loadRole);
                            resData.t.forEach(function (item) {
                                /*1-正常 0-撤回 2-草稿*/
                                if(item.status == '1'){
                                    item.status = '正常'
                                } else if(item.status == '0'){
                                    item.status = '撤回'
                                } else if(item.status == '2'){
                                    item.status = '草稿'
                                }
                                if(item.notifyType == '04'){
                                    item.notifyType = '系统通知'
                                }
//                                        01：银行端管理人员 02：银行端柜员 03：缴费单位管理人员 04：缴费单位缴费用户';
//                                        if(item.notifyType == '01'){
//                                            item.notifyType = '银行端管理里人员'
//                                        } else if(item.notifyType == '02'){
//                                            item.notifyType = '银行端柜员'
//                                        } else if(item.notifyType == '03'){
//                                            item.notifyType = '缴费单位管理人员'
//                                        } else if(item.notifyType == '04'){
//                                            item.notifyType = '缴费单位缴费用户'
//                                        }
                            });
                        }
                    });
            },
            computed:{
                isOverflow:function () {
                    if(this.isShowingBox){
                        $(".main-right").css({'overflow':"hidden"});
                    }
                    if(!this.isShowingBox){

                        $(".main-right").css({'overflow':"auto"});
                    }

                }
            }
        });
</script>

<style scoped>
    .el-table tr{
        height: 40px;
    }
    .addUsrtBtn{
        padding: 9px 15px;
        font-size: 12px;
    }
    .el-table::before{
        height: 0;
    }

    #jgTree{
        position: absolute;
        z-index: 999;
        left: 40px;
        width: 210px;
        background: #fff;
        display: none;
    }

    #menuContent{
        background-color: #fff;
        border: 1px solid #fff;
    }


    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    .el-input{
        width: auto;
    }
    .noticeBox{
        margin-bottom: 0;
        border-bottom: 1px solid #f2f4f8;
    }
    .text-r{
        text-align: left;
    }
    .footerBox {
        width: 100%;
        height: 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
        text-align: right;
    }
    /*详情样式*/
    .el-dialog__body{
        padding: 40px 0 40px 100px;
    }
    .el-dialog__header span {
        padding-left: 20px;
    }
    .el-dialog__headerbtn .el-dialog__close {
        color: #aaa;
        font-size: 22px;
    }
    .dialogDetails .el-dialog {
        overflow: hidden;
        -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        box-shadow: 0 0 16px rgba(0,0,0,0.5);
    }
    .el-dialog__header {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__body {
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body {
        padding: 50px 0 0 0;
    }
    .dialogDetails .info-template-content .el-row:nth-child(even) {
        background-color: #f8f9fb;
    }
    .dialogDetails .item-row {
        /*height: 46px;*/
        line-height: 46px;
        font-size: 16px;
        padding-left: 60px;
    }
    .dialogDetails .item-row div:first-of-type {
        color: #666;
        text-align: left;
    }
    .dialogDetails .item-row div:last-of-type {
        color: #333;
        padding-right: 10px;
    }
    .dialogDetails .info-template-content .el-row:last-of-type {
        margin-bottom: 30px;
    }
    .el-textarea__inner{
        overflow: auto;

    }
</style>
